<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul li {
            width: 300px;
            height: 60px;
            font-size: 0;
        }
        ul li span {
            display: inline-block;
            width: 58px;
            height: 58px;
            font-size: 16px;
            background-color: #ccc;
            border: 1px solid #000;
        }

    </style>
</head>

<body>
    <!-- 
        <ul>
            <li><span></span><span></span><span></span><span></span><span></span></li>
        </ul> 
    -->

    <script>
        // 座位的数据（二维数组） 4行5列
        var data = [
            [1, 1, 3, 2, 1],
            [1, 3, 3, 3, 1],
            [1, 3, 1, 3, 1],
            [1, 1, 2, 2, 1]
        ]
        // 要求：
            // 数字1，表示空的座位
            // 数字2，表示预定的额座位
            // 数字3，表示已售空的座位
        // 定义字符串
        var html = "<ul>";
        // 外循环
        for(var i = 0 ; i < data.length ; i ++){
            // 拼接字符串li标签
            html += "<li>";
                // 内循环
                for(var j = 0 ; j < data[i].length ; j ++){
                    // 拼接span标签
                    // html += "<span></span>";
                    if(data[i][j] == 1){//表示空座位
                        html += "<span style='background:gray;'></span>";
                    }else if(data[i][j] == 2){//表示预定座位
                        html += "<span style='background:green;'></span>";
                    }else {// 表示已售出的座位
                        html += "<span style='background:red;'></span>";
                    }
                }
            //li结束标签
            html += "</li>";
        }
        // ul结束标签
        html += "</ul>";

        // 渲染字符串
        document.write(html);



    </script>
</body>

</html>